<template>
	<div class="likeBtn">
		<div class="likeText">点赞文章, 支持作者</div>
		<img :src="logo" @click="change" />
		<div class="likeTextBottom">{{likeNum}}人点赞</div>
	</div>
</template>

<script>
	export default {
		props: ['info'],
		data() {
			return {
				likeNum: this.info.like,
				isLike: false,
				logo: require('../../static/dislike.png'),
				likeLogo: require('../../static/like.png'),
				dislikeLogo: require('../../static/dislike.png')
			}
		},
		mounted() {
			this.$axios({
				url: this.ip + '/isPostLike',
				method: 'post',
				data: {
					postID: this.$props.info._id,
					userID: this.$storage.get('user').id
				}
			}).then(res => {
				if(res.data.result != null){
					this.isLike = true
					this.logo = this.likeLogo
				}else{
					this.isLike = false
					this.logo = this.dislikeLogo
				}
				console.log('aa',res)
			})
		},
		methods: {
			change() {
				if (this.isLike) {
					this.$axios({
						url: this.ip + '/delPostLike',
						method: 'post',
						data: {
							postID: this.$props.info._id,
							userID: this.$storage.get('user').id,
							value:this.$props.info.like - 1
						}
					}).then(res => {
						// 更改图标样式
						this.logo = this.dislikeLogo
						console.log(res)
						this.likeNum --
					})
				} else {
					// // 更改图标样式
					// this.logo = this.likeLogo
					this.$axios({
						url: this.ip + '/postLike',
						method: 'post',
						data: {
							postID: this.$props.info._id,
							userID: this.$storage.get('user').id,
							value:this.$props.info.like + 1
						}
					}).then(res => {
						// 更改图标样式
						this.logo = this.likeLogo
						console.log(res)
						this.likeNum ++
					})
				}
				this.isLike = !this.isLike
			}
		}
	}
</script>

<style>
	.likeBtn {
		width: 100%;
		height: 150px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.likeBtn:hover .img {
		background-color: #999999;
	}

	.likeBtn img {
		width: 30px;
		height: 30px;
		margin: 15px 0;
		cursor: pointer;
	}

	.likeBtn .likeText {
		height: 30px;
		line-height: 30px;
	}

	.likeBtn .likeTextBottom {
		font-size: 13px;
	}
</style>
